사이트 만들기17 실전 사이트 만들기 01 사이트 만들기 이번 사이트는 다수의 유형을 종합하여 하나의 사이트를 만드는 방법입니다. ○ 사이트 완성하기 01 여태까지 했던 사이트 유형을 종합하여 가장 기본적인 하나의 사이트 형태로 구성합니다. 사이트의 구성은 헤더 영역, 메인 영역, 푸터 영역으로 구성되어 있으며 메인 영역은 여러개의 타입이 모여 구성합니다. 또한 만든 사이트를 태블릿과 핸드폰의 크기에 맞춰 반응형 웹까지 완성합니다. 1. 헤더 영역 로고와 메뉴 및 로그인 버튼이 들어가는 헤더 영역은 반응형 시 메뉴창이 햄버거 버튼 형태로 구성됩니다. 헤더 영역 코드 web site 이미지 영역 이미지/텍스트 영역 카드 영역 배너 영역 텍스트 영역 로그인 반응형 및 햄버거 버튼 코드 햄버거 버튼은 마치 햄버거 모양의 3선 메뉴 버튼을 클릭하거나 터.. 2022. 9. 15. 푸터 유형 사이트 01 사이트 만들기 이번 사이트는 푸터 유형입니다. ○ 푸터 유형 01 푸터 유형은 컨텐츠 최하단에 들어가는 유형으로 사이트맵이나 주소, 이메일, 연락처 등이 주로 들어갑니다. ▶ HTML 파트 푸터 영역 사이트 웹표준 사이트 반응형 사이트 패럴랙스 사이트 포트폴리오 사이트 헤더 영역 메뉴 유형 01 메뉴 유형 02 > div { width: 16%; } .footer__menu > div h3 { font-size: 18px; margin-bottom: 20px; } .footer__menu li a { font-size: 14px; color: #666; margin-bottom: 10px; display: block; } .footer__right { border-top: 1px solid #d9d9d9.. 2022. 9. 6. 배너 유형 사이트 01 사이트 만들기 이번 사이트는 배너 유형입니다. ○ 슬라이드 유형 01 배너 유형은 컨텐츠 중간에 긴 가로로 긴 형식으로 삽입되는 유형으로 광고나 홍보용 컨텐츠 등이 자주 들어갑니다. ▶ HTML 파트 배너 영역 저녁의 와인 한잔 오늘 밤은 좋은 무드를 가지고 와인 한잔 어떨까요? 와인은 포도를 발효시켜 만든 오랜 역사를 가진 양조주입니다. 배너 유형01 ▶ CSS 파트 .banner__inner { background-image: url(../img/banner_bg01.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; text-align: center; padding: 120px 0; color.. 2022. 9. 6. 슬라이드 유형 사이트 01 사이트 만들기 이번 사이트는 슬라이드 유형입니다. ○ 슬라이드 유형 01 슬라이드 유형은 하나의 이미지 공간에 일정 간격으로 여러 이미지를 로테이션해서 보여주는 유형입니다. ▶ HTML 파트 슬라이드 영역 The Fruit Sweet Fresh 싱싱한 과일이 왔어요~ 맛도 좋고 향도 좋고 몸에도 좋은 그 맛! 과일의 여러가지 쓰임새에 대해 알아봅시다~! 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 큰 텍스트 구역 안에 텍스트를 넣습니다. ▶ CSS 파트 .slider__inner { margin-top: 70px; } .slider { position: relative; } .slider_img { background: url(../img/slider_bg01.jpg) no-.. 2022. 9. 6. 이미지/텍스트 유형 01 사이트 만들기 이번 사이트는 이미지/텍스트 유형입니다. ○ 이미지/텍스트 유형 01 이미지/텍스트 유형은 한 아티클에 이미지 구역과 텍스트 구역이 조합되어 있는 유형입니다. ▶ HTML 파트 유용한 사이트 살펴보기 이미지 텍스트 유형01 유용한 사이트 살펴보기 웹디자이너, 웹 퍼블리셔, 프론트앤드 개발자를 위한 유용한 사이트입니다. 튜토리얼 사이트 레퍼런스 사이트 웹폰트 사이트 CSS 사이트 WebGL 사이트 Youtube 사이트 레퍼런스 사이트 튜토리얼 사이트 텍스트 구역과 2개의 이미지 구역을 나누어 총 3가지 구역을 설정합니다. 이미지의 경우 CSS를 이용해 배경으로 넣기 위해 각각의 이미지 구역에 클래스를 지정하였습니다. ▶ CSS 파트 /* fonts */ @import url('https://.. 2022. 9. 1. 헤더 유형 01 사이트 만들기 이번 사이트는 헤더 유형입니다. ○ 헤더 유형 01 헤더 유형은 사이트 최상단 로고와 메뉴 등이 들어가는 구역입니다. ▶ HTML 파트 web site 헤더 영역 슬라이드 영역 배너 영역 컨텐츠 영역 푸터 영역 로그인 그게 로고 / 메뉴 / 로그인 세가지 부분으로 나누어 구분을 짓습니다. ▶ CSS 파트 /* fonts */ @import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css'); .nexon { font-family: 'NexonLv1Gothic'; font-weight: 400; } /* reset */ * { margin: 0; padding: 0; } a { text-decoration: none.. 2022. 9. 1. 이미지 유형 03 사이트 만들기 이번 사이트는 이미지 안에 텍스트를 넣는 유형입니다. 이미지 유형 03에 대해선 이 곳에서 보실 수 있습니다. 이미지 유형 03 코드 //CSS파트 //HTML파트 세계 7대 불가사의 2007년 7월 7일 새롭게 지정된 과거 인류의 놀라운 기적 세계 7대 불가사의를 소개합니다. 멕시코 치젠이트사 페이스북 페이지 이동 페이지 이동 페이지 이동 페이지 이동 멕시코 치젠이트사 페이스북 페이지 이동 페이지 이동 페이지 이동 페이지 이동 멕시코 치젠이트사 페이스북 페이지 이동 페이지 이동 페이지 이동 페이지 이동 멕시코 치젠이트사 페이스북 페이지 이동 페이지 이동 페이지 이동 페이지 이동 멕시코 치젠이트사 페이스북 페이지 이동 페이지 이동 페이지 이동 페이지 이동 이번 이미지 정렬 방식은 grid .. 2022. 8. 22. 이미지 유형 02 사이트 만들기 이번 사이트는 이미지 안에 텍스트를 넣는 유형입니다. 이미지 유형 01에 대해선 이 곳에서 보실 수 있습니다. 이미지 유형 사이트 만들기 02 3개의 이미지 안에 텍스트와 링크를 넣는 유형입니다. 이번 유형은 이미지와 텍스트에 몇가지 효과가 추가되었습니다. 이미지 유형 02 코드 //CSS 파트 //HTML 파트 간편한 한끼 식사 패스트푸드 많은 사람들이 즐겨먹는 패스트푸드입니다. 스테이크 햄버거 자세히 보기 하와이안 피자 자세히 보기 저염 감자튀김 자세히 보기 레이아웃을 만드는건 이미지 유형 01이랑 똑같이 박스 3개를 잡고 해당 박스에 이미지와 텍스트를 추가하면 됩니다. ▶ 블러 효과 CSS에서 박스의 블러 효과를 줘서 이미지에 뒤가 약간 비치는 블러 효과의 공간을 만들 수 있습니다. .. 2022. 8. 18. 이미지 유형 01 사이트 만들기 이번 사이트는 이미지 안에 텍스트를 넣는 유형입니다. 이미지 유형 사이트 만들기 01 2개의 이미지 안에 텍스트와 링크를 넣는 유형입니다. 이미지 유형01 코드 //CSS 파트 //HTML 파트 365일 언제나 맛있는 과일 쥬스 남녀노소 누구에게나 인기있는 생과일 쥬스를 소개합니다! 상큼한 오렌지 쥬스 톡 쏘는 맛과 시원하고 달달한 오랜지 쥬스입니다. 비타민C의 함유량도 엄청나요. 자세히보기 달콤한 딸기 쥬스 달달하고 맛있는 딸기쥬스입니다. 한모금 마시면 잊을수가 없는 맛이죠. 자세히보기 카드 유형과 똑같이 2개의 박스를 만들고 해당 위치에 이미지와 텍스트를 넣어줍니다. 이미지를 넣을때 HTML에 를 활용해 이미지를 삽입하는 방식과 CSS에 background-img를 사용해서 이미지를 삽.. 2022. 8. 18. 카드 유형 03 사이트 만들기 이번 사이트는 박스 안에 카드를 만드는 유형입니다. 이번에 만들 사이트 역시 카드 유형 01의 심화 버전입니다. 카드 유형 사이트 만들기 03 이번 카드 유형은 파란색 배경 안, 칸막이가 있는 박스에 카드 플롯이 3개 들어간 유형입니다. 1. 컨테이너 만들기 컨텐츠를 넣기 전 레이아웃을 만들기 위한 컨테이너를 만듭니다. wrap을 파란색으로 칠해 배경을 만든 후 wrap 안에 컨테이너를 만듭니다. 컨테이너를 중앙에 위치시키기 위해선 wrap에 'display: flex'와 'align-items: center'를 주어야 합니다. 'align-items'은 flex에서 수직 방향의 위치를 지정해 줍니다. 2. 카드 만들기 컨텐츠를 넣기 전 컨텐츠가 들어갈 카드와 카드 사이의 칸막이를 만듭니다.. 2022. 8. 11. 카드 유형 02 사이트 만들기 이번 사이트는 8개의 카드 유형 사이트 입니다. 이번에 만들 사이트는 카드 유형 01의 심화 버전입니다. 카드 유형 사이트 만들기 02 이번 카드 유형은 8개의 카드가 4개씩 2층으로 이루어진 구조입니다. ▶ HTML 파트 저번 유형보다 카드가 8개로 늘어났지만 크게 달라진 점은 없습니다. 네모네모 재밌는 LEGO! 남녀노소 누구나 좋아하는 레고입니다. 가지각색의 모양으로 아주 다양하고 창의적인 모형을 만들어 보세요! 기본적인 레고 블럭 가장 기본적이고 심플한 레고 블럭 모양입니다. 아래 쪽 흠에 위쪽 부분을 끼워서 연결할 수 있습니다. 다양한 레고 블럭 또한 레고는 기본 블럭뿐만 아니라 직사각형, 원통형 등등 여러가지 모양의 블럭이 있습니다. 더 많은 레고 블럭 사람 모양이나 동물, 도구.. 2022. 8. 9. 카드 유형 01 사이트 형태 많은 사이트가 다양한 형태로 디자인되어 있으며 사이트는 크게 3가지로 분류됩니다. 1. 웹표준 사이트 2. 페럴렉스 사이트 3. 포폴형 사이트 또한 사이트는 큰 영역으로 구분해서 레이아웃을 형성합니다. 메뉴 영역 배너 영역 컨텐츠 영역 푸터 영역 각 영역에는 여러가지 유형의 컨텐츠가 들어가게 되며 복합적인 유형으로 구성될 수 도 있습니다. 메뉴 유형 배너 유형 이미지 유형 슬라이드 유형 동영상 유형 카드 유형 게시판 유형 푸터유형 이미지/텍스트(탭/슬라이드 등등) 유형 텍스트 유형 따라서 코딩을 시작하기 전에 전반적인 틀을 만들어 놓은 후 시작하는게 좋습니다. 카드 유형 사이트 만들기 01 이번에 만들 간단한 카드 유형의 사이트 형태입니다. 우선 헤더 부분을 만들기 위해 전반적인 리셋을 해준.. 2022. 8. 8. 이전 1 2 다음
